import BasicTable from '@/components/table/BasicTable';
import {
  PageContainer,
  ProDescriptions,
  ProDescriptionsItemProps,
  type ProColumns,
} from '@ant-design/pro-components';
import { Drawer, message } from 'antd';
import React, { useState } from 'react';
import { EmployeeModel } from '../data';
import { deleteemployee, getemployeeList } from '../service';

const BiometicPage: React.FC = () => {
  /* const actionRef = useRef<ActionType>(); */
  const [selectedRows] = useState<EmployeeModel.employeeResponse[]>([]);
  const [currentRow, setCurrentRow] = useState<EmployeeModel.employeeResponse | undefined>(
    undefined,
  );
  const [showDetail, setShowDetail] = useState<boolean>(false);

  const handleRemoveRule = async () => {
    try {
      await deleteemployee({ codeList: selectedRows.map((row) => row.code!) });
      message.success('删除成功');
    } catch (error) {
      message.error('删除失败，请重试！');
    }
  };

  const columns: ProColumns<EmployeeModel.employeeResponse>[] = [
    {
      title: '员工编号',
      dataIndex: 'code',
      render: (dom, entity) => (
        <a
          onClick={() => {
            setCurrentRow(entity);
            setShowDetail(true);
          }}
        >
          {dom}
        </a>
      ),
    },
    {
      title: '员工姓名',
      dataIndex: 'name',
      valueType: 'textarea',
    },
    {
      title: '部门名称',
      dataIndex: 'employeeName',
      valueType: 'textarea',
    },
    {
      title: '角色名称',
      dataIndex: 'positionName',
      valueType: 'textarea',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      hideInForm: true,
      valueType: 'dateTime',
    },
  ];

  return (
    <PageContainer>
      <BasicTable<EmployeeModel.employeeResponse, EmployeeModel.employeeRequest>
        removeRule={handleRemoveRule}
        columns={columns}
        request={async (params) => {
          const msg = await getemployeeList({
            name: params.name,
            pageNum: params.current,
            pageSize: params.pageSize,
          });
          return {
            data: msg.result?.items || [],
            total: msg.result?.totalCount || 0,
            success: true,
          };
        }}
      />
      <Drawer
        width={600}
        open={showDetail}
        onClose={() => {
          setCurrentRow(undefined);
          setShowDetail(false);
        }}
        closable={false}
      >
        {currentRow && (
          <ProDescriptions<EmployeeModel.employeeResponse>
            column={2}
            title={currentRow.name}
            request={async () => ({
              data: currentRow || {},
            })}
            params={{ id: currentRow.code }}
            columns={columns as ProDescriptionsItemProps<EmployeeModel.employeeResponse>[]}
          />
        )}
      </Drawer>
    </PageContainer>
  );
};

export default BiometicPage;
